<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		
		<!-- 父组件 -->
		<div id="app">
			<cpn @item-click="itemcalck"></cpn>
		</div>
		
		<!-- 子组件 -->
		<template id="cpn">
			<div>
				<button v-for="item in car" @click="btnClick(item)">{{item.name}}</button>
			</div>
		</template>
		<script>
			const cpn = {
				template: "#cpn",
				data() {
					return {
						car: [{
								id: 1,
								name: "手机专卖"
							},
							{
								id: 2,
								name: "冰箱彩电"
							},
							{
								id: 3,
								name: "剪子菜刀"
							},
							{
								id: 5,
								name: "平房漏水"
							},
						]
					}
				},
				methods: {
					btnClick(item) {
						
						// 发射事件
						this.$emit("item-click", item);
					}
				}
			}
			var app = new Vue({
				el: '#app',
				data: {

				},
				methods: {
					itemcalck(item) {
						console.log(item)
					}
				},
				components: {
					cpn
				}
			})
		</script>
	</body>
</html>
